<template>
  <div id="app">
    <top-nav></top-nav>
    <div id="title">设置个人信息</div>
    <div id="myselect" ref="myselect">
      <div class="item" @click="nav1cli($event)">基本信息</div>
      <div class="item" @click="nav1cli($event)">设置头像</div>
      <div class="item" @click="nav1cli($event)">绑定邮箱</div>
    </div>
    <router-view></router-view>
    <button-nav></button-nav>
  </div>
</template>
<script>
import buttonNav from "../../components/buttonNav.vue";
export default {
  // 进组件之前判断是否登录
  beforeRouteEnter: (to, from, next) => {
    if (window.localStorage.getItem("islogin")) {
      next();
    } else {
      next("/login"); // 跳转到登录
    }
  },
  components: { buttonNav },
  methods: {
    myselect() {
      for (let i = 0; i < this.$refs.myselect.children.length; i++) {
        this.$refs.myselect.children[i].style.backgroundColor = "";
        this.$refs.myselect.children[i].style.color = "#dd3915";
      }
    },
    nav1cli(that) {
      switch (that.path[0].innerHTML) {
        case "基本信息":
          this.myselect();
          this.$router.push({ path: "/zlxinfo/basicinfo" });
          this.$refs.myselect.children[0].style.backgroundColor = "";
          this.$refs.myselect.children[0].style.color = "black";
          break;
        case "设置头像":
          this.$router.push({ path: "/zlxinfo/touxiang" });
          this.myselect();
          this.$refs.myselect.children[1].style.backgroundColor = "";
          this.$refs.myselect.children[1].style.color = "black";
          break;
        case "绑定邮箱":
          this.$router.push({ path: "/zlxinfo/email" });
          this.myselect();
          this.$refs.myselect.children[2].style.backgroundColor = "";
          this.$refs.myselect.children[2].style.color = "black";
          break;
      }
    },
  },
};
</script>

<style scoped="scoped">
#app {
  width: 1000px;
  margin: 0 auto;
  font-size: 16px;
}
#title {
  font-size: 34px;
  margin-bottom: 30px;
  font-weight: 700;
}
#myselect {
  display: flex;
  cursor: pointer;
}
#myselect .item {
  color: #dd3915;
  padding: 5px 16px;
}
#myselect .item:hover {
  background-color: #dd3915;
  color: white !important;
}
</style>